<template>
  <div>
    <div class="order panel">
        <div class="inner">
            <div class="filter">
                <a href="javascript:;" :style="active1 == 0 ? 'color:#fff;' : ''" @click="changeTabs(0)">365天</a>
                <a href="javascript:;" :style="active1 == 1 ? 'color:#fff;' : ''" @click="changeTabs(1)">90天</a>
                <a href="javascript:;" :style="active1 == 2 ? 'color:#fff;' : ''" @click="changeTabs(2)">30天</a>
                <a href="javascript:;" :style="active1 == 3 ? 'color:#fff;' : ''" @click="changeTabs(3)">24小时</a>
            </div>
            <div class="data">
                <div class="item">
                    <h4>{{ datas[active1][0] }}</h4>
                    <span>
                        <i class="icon-dot" style="background-color:#ed3f35"></i>
                        订单量
                    </span>
                </div>
                <div class="item">
                    <h4>{{ datas[active1][1] }}</h4>
                    <span>
                        <i class="icon-dot" style="background-color:#eacf19"></i>
                        销售额(万元)
                    </span>
                </div>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
export default {
    data(){
        return{
            active1: 0,
            datas:[
                ['20,301,987',99834],
                ['301,987',9834],
                ['1,987',3834],
                ['987',834]
            ],
        }
    },
    mounted(){
        setInterval(() => {
            this.active1 += 1
            if(this.active1 > 3){
            this.active1 = 0
        }
        }, 4000)
    },
    methods:{
        changeTabs(x){
            this.active1 = x
        }
    }
}
</script>

<style scoped>
    /* 订单模块制作 */
    .order{
        height: 2.5rem;
    }
    .order .filter{
        display: flex;
    }
    .order .filter a{
        display: block;
        height: 0.35rem;
        line-height: 0.35rem;
        padding: 0 0.27rem;
        color: #1950c4;
        font-size: 0.3rem;
        border-right: 0.025rem solid #00f2f1;
    }
    .order .filter a:first-child{
        padding-left: 0;
    }
    .order .filter a:last-child{
        border-right: none;
    }
    .active{
        color: #fff;
        font-size:0.25rem;
    }
    .order .data{
        display: flex;
        margin-top: 0.25rem;
    }
    .order .item{
        width: 50%;
    }
    .order h4{
        font-size: 0.42rem;
        color: #fff;
        margin-bottom:0.125rem;
        font-weight: 400;
    }
    .order span{
        display: block;
        color: #4c9bfd;
        font-size: 0.25rem;
    }
    .icon-dot{
        display: inline-block;
        width: 5px;
        height: 11px;
        border-radius: 5px;
    }
</style>